<template>
  <view class="user-info-page">
    <!-- 下拉刷新 -->
    <scroll-view 
      scroll-y 
      refresher-enabled
      :refresher-triggered="isRefreshing"
      @refresherrefresh="handleRefresh"
      class="scroll-container"
    >
      <!-- 页面头部 -->
      <view class="page-header">
        <text class="page-title">个人中心</text>
        <text class="page-subtitle">个人信息管理</text>
      </view>

      <!-- 用户卡片 -->
      <user-card 
        :user="currentUserCard"
        :editable="false"
      />

      <!-- 基本信息卡片 -->
      <info-card 
        title="基本信息"
        icon="icon-user"
        :items="basicInfoItems"
        :loading="isLoading"
        class="info-card"
      />

      <!-- 工作信息卡片 -->
      <info-card 
        title="工作信息"
        icon="icon-community"
        :items="workInfoItems"
        :loading="isLoading"
        class="info-card"
      />



      <!-- 操作按钮 -->
      <action-buttons
        :primary-action="{ text: '编辑资料'}"
        @primary-action="handleEditProfile"
      />
    </scroll-view>
  </view>
</template>

<script>
import UserCard from './components/UserCard.vue'
import InfoCard from './components/InfoCard.vue'
import ActionButtons from './components/ActionButtons.vue'
import { mapActions } from 'vuex'
import { UserService } from '@/api/system/user'

export default {
  name: 'UserInfo',
  components: {
    UserCard,
    InfoCard,
    ActionButtons
  },
  data() {
    return {
      isLoading: false,
      isRefreshing: false
    }
  },
  computed: {
    // 用户卡片数据（直接访问Vuex state）
    currentUserCard() {
      const username = this.$store.state.user.username
      const nickname = this.$store.state.user.nickname
      const userConfig = this.$store.state.user.userConfig || {}
      const workInfo = this.$store.state.user.workInfo || {}
      return {
        nickname: nickname,
        avatar: this.$store.state.user.avatar || '/static/images/profile.jpg',
        mobile: this.$store.state.user.mobile || '-',
        email: this.$store.state.user.email || '-',
        deptName: this.$store.state.user.deptName,
        roles: this.$store.state.user.roles || [],
        roleName: this.$store.state.user.roleName,
      }
    },
    
    // 基本信息项（直接访问Vuex state）
    basicInfoItems() {
      const username = this.$store.state.user.username
      const nickname = this.$store.state.user.nickname
      const userConfig = this.$store.state.user.userConfig || {}
      const workInfo = this.$store.state.user.workInfo || {}
      
      return [
        { label: '用户名', value: nickname || '-' },
        { label: '手机号', value: this.$store.state.user.mobile || '-' },
        { label: '邮箱', value: this.$store.state.user.email || '-' },
        { label: '部门', value: this.$store.state.user.deptName || workInfo.deptName || workInfo.dept_name || userConfig.deptName || userConfig.dept?.deptName || userConfig.dept_name || '-' },
        ]
    },
    
    // 工作信息项（直接访问Vuex state）
    workInfoItems() {
      const workInfo = this.$store.state.user.workInfo || {}
      const userConfig = this.$store.state.user.userConfig || {}
      
      return [
        { label: '班次', value: workInfo.workShiftName || userConfig.workShift || '-' },
        { label: '班组', value: workInfo.workClassName || userConfig.workClass || '-' },
        { label: '工序', value: workInfo.processName || userConfig.processName || '-' },
        { label: '机组', value: workInfo.prodCenterName || userConfig.prodCenter || '-' },
        { label: '仓库', value: workInfo.warehouseName || userConfig.wmName || userConfig.warehouseName || '-' }
      ]
    },
    
    
  },
  methods: {
    // 下拉刷新处理
    async handleRefresh() {
      this.isRefreshing = true
      
      try {
        // 重新获取用户详细信息
        await this.fetchUserDetail()
        
        // 获取最新用户配置（关键：强制刷新缓存）
        await this.fetchLatestUserConfig()
        
        uni.showToast({
          title: '刷新成功',
          icon: 'success',
          duration: 1500
        })
      } catch (error) {
        console.error('下拉刷新失败:', error)
        uni.showToast({
          title: '刷新失败',
          icon: 'error',
          duration: 2000
        })
      } finally {
        // 延迟关闭刷新状态，让用户看到刷新效果
        setTimeout(() => {
          this.isRefreshing = false
        }, 500)
      }
    },
    
    // 获取用户详细信息（通过API）
    async fetchUserDetail() {
      try {
        const userId = this.$store.state.user.id
        if (!userId) {
          console.warn('用户ID不存在，无法获取详细信息')
          return
        }
        
        console.log('🔄 开始获取用户详细信息，用户ID:', userId)
        
        // 调用API获取用户详情
        const response = await UserService.getUserInfo(userId)
        console.log('📡 API响应数据:', response)
        
        if (response.code === 0 && response.data) {
          const userData = response.data
          console.log('✅ 成功获取用户详情:', userData)
          
          // 更新Vuex中的用户信息
          if (userData.deptName) {
            this.$store.commit('user/SET_DEPT_NAME', userData.deptName)
            console.log('🏢 更新部门信息:', userData.deptName)
          }
          
          if (userData.mobile) {
            this.$store.commit('user/SET_MOBILE', userData.mobile)
            console.log('📱 更新手机号:', userData.mobile)
          }
          
          // 如果有头像信息也更新
          if (userData.avatar) {
            this.$store.commit('user/SET_AVATAR', userData.avatar)
            console.log('👤 更新头像:', userData.avatar)
          }
          
          console.log('✅ 用户信息更新完成')
        } else {
          console.warn('获取用户详情失败:', response.msg || '未知错误')
        }
      } catch (error) {
        console.error('获取用户详情失败:', error)
        uni.showToast({
          title: '获取用户详情失败',
          icon: 'error',
          duration: 2000
        })
      }
    },
    
    // 获取最新用户配置（强制刷新缓存）
    async fetchLatestUserConfig() {
      try {
        const userId = this.$store.state.user.id
        if (!userId) {
          console.warn('用户ID不存在，无法获取用户配置')
          return
        }
        
        // 强制刷新缓存获取最新配置
        await this.$store.dispatch('user/getUserConfigWithCache', { userId, forceRefresh: true })
        
      } catch (error) {
        console.error('获取最新用户配置失败:', error)
        uni.showToast({
          title: '刷新配置失败',
          icon: 'error',
          duration: 2000
        })
      }
    },
    ...mapActions('user', ['GetInfo']),
    
  
    
    formatPosts(posts) {
      if (!posts || !Array.isArray(posts)) return '-'
      return posts.map(post => post.name || post.postName || post).join(', ')
    },
    
    formatDateTime(datetime) {
      if (!datetime) return '-'
      
      // 处理不同类型的日期格式
      if (typeof datetime === 'string') {
        return datetime.replace('T', ' ').substring(0, 16)
      } else if (typeof datetime === 'number') {
        // 时间戳格式
        const date = new Date(datetime)
        return date.toLocaleString('zh-CN', { 
          year: 'numeric', 
          month: '2-digit', 
          day: '2-digit', 
          hour: '2-digit', 
          minute: '2-digit' 
        }).replace(/\//g, '-')
      } else if (datetime instanceof Date) {
        // Date对象格式
        return datetime.toLocaleString('zh-CN', { 
          year: 'numeric', 
          month: '2-digit', 
          day: '2-digit', 
          hour: '2-digit', 
          minute: '2-digit' 
        }).replace(/\//g, '-')
      }
      
      // 其他格式，转换为字符串后处理
      return String(datetime).replace('T', ' ').substring(0, 16)
    },
    
    handleEditProfile() {
      // 获取当前用户的手机号码
      const phonenumber = this.$store.state.user.mobile || ''

      
      // 将用户信息作为参数传递到编辑页面
      uni.navigateTo({
        url: `/pages/mine/info/edit?phonenumber=${encodeURIComponent(phonenumber)}`
      })
    },
    
    // 显示当前用户配置详细信息（调试用）
    showCurrentUserConfig() {
      // 此方法已清空，保留空实现
    },
    
        
    // 获取完整用户信息（复用首页逻辑）
    async fetchCompleteUserInfo() {

      this.isLoading = true
      
      try {
        // 检查token和登录状态
        const token = this.$store.state.user.token
        const userId = this.$store.state.user.id
        
        if (!token || !userId) {
          console.warn('用户未登录，无法获取用户信息')
          return
        }
        
        // 直接从Vuex获取数据（复用首页逻辑）
       
        const username = this.$store.state.user.username
        const nickname = this.$store.state.user.nickname
        const avatar = this.$store.state.user.avatar
        const roles = this.$store.state.user.roles
        const permissions = this.$store.state.user.permissions
        const currentWorkInfo = this.$store.state.user.workInfo || {}
        const userConfig = this.$store.state.user.userConfig || {}
        
        // 优先使用现有数据，不再强制调用API重新获取
        // 像mine/index.vue一样，直接使用Vuex中的现有数据
        if (!userId && !username && !nickname) {
          console.warn('用户基本信息不完整，但继续使用现有数据')
        }
        
      } catch (error) {
        console.error('获取用户信息失败:', error)
        
        uni.showToast({
          title: '获取用户信息失败',
          icon: 'error',
          duration: 2000
        })
        
        // 不再抛出错误，让页面可以继续显示
        console.warn('继续显示页面，使用默认数据')
      } finally {
        this.isLoading = false
      }
    },
    
        
    
    async initializeUserData() {
      try {
        // 检查token和登录状态（复用首页逻辑）
        const token = this.$store.state.user.token
        const userId = this.$store.state.user.id
        
        if (!token || !userId) {
          console.warn('用户未登录，重置用户信息')
          return
        } 
        // 通过API获取用户详细信息
        await this.fetchUserDetail()
        
        // 获取最新用户配置（解决缓存问题）
        await this.fetchLatestUserConfig()
        
      } catch (error) {
        console.error('初始化用户数据失败:', error)
      }
      
      // 显示最终的用户配置信息
      this.showCurrentUserConfig()
    },
  },
  // 生命周期
  onLoad(options) {
    // 页面加载时初始化数据
    this.initializeUserData()
  },
  
  onShow() {
  }
}
</script>

<style lang="scss" scoped>
.user-info-page {
  height: 100vh;
  background-color: #f5f5f5;
}

.scroll-container {
  height: 100%;
  padding: 20rpx;
}

.page-header {
  text-align: center;
  margin-bottom: 40rpx;
  padding: 40rpx 0;
}

.page-title {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.page-subtitle {
  display: block;
  font-size: 28rpx;
  color: #999;
}

.info-card {
  margin-bottom: 20rpx;
}

// 响应式布局
@media (max-width: 750px) {
  .scroll-container {
    padding: 16rpx;
  }
  
  .page-header {
    margin-bottom: 32rpx;
    padding: 32rpx 0;
  }
  
  .page-title {
    font-size: 42rpx;
  }
  
  .page-subtitle {
    font-size: 26rpx;
  }
}
</style>
